<template>
	<view class="weather-search-container">
		<cu-custom :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">切换城市</block>
		</cu-custom>
		<search @change="handleSearch" placeholder="搜索市/区/县等"></search>
		<template v-if="keyword">
			<view class="suggest-list">
				<view class="suggest-item" v-for="(item, index) in suggestList" :key="index" @click="handleEmit(item)">
					<text :class="{ active: item.adm1.includes(keyword) }">{{ item.adm1 }},</text>
					<text :class="{ active: item.adm2.includes(keyword) }" v-if="item.adm2 != item.name">{{ item.adm2 }},</text>
					<text :class="{ active: item.name.includes(keyword) }">{{ item.name }}</text>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="big-title" v-if="currentCity">
				<view class="middle-title">当前定位</view>
				<view class="small-item" @click="handleSure(currentCity)">{{ currentCity }}</view>
			</view>
			<view class="big-title" style="margin-top: 25px;">
				<view class="middle-title">热门区域</view>
				<view class="hot-list">
					<view class="small-item" v-for="(item, index) in hotList" :key="index" @click="handleSure(item)">{{ item }}</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
import Search from '@/components/Search/index';
import { getCityInfo } from '@/api/tianqi.js';

export default {
	components: { Search },
	data() {
		return {
			currentCity: '',
			hotList: ['北京', '上海', '广州', '深圳', '郑州', '西安', '南京', '杭州', '武汉', '成都', '沈阳', '天津'],
			keyword: '',
			suggestList: []
		};
	},
	onLoad(val) {
		this.currentCity = val.currentCity;
	},
	methods: {
		handleSure(val) {
			getCityInfo({ location: val, range: 'cn', number: 1 })
				.then(res => {
					const data = res.data;
					if (data.code == 200) {
						this.$store.commit('SET_CITY_INFO', data.location[0]);
						uni.navigateTo({
							url: './index?from=search'
						});
					} else {
						this.showError();
					}
				})
				.catch(() => {
					this.showError();
				});
		},

		handleSearch(val) {
			this.keyword = val;
			if (!val) return;
			this.getSuggest();
		},

		getSuggest() {
			getCityInfo({ location: this.keyword, range: 'cn', number: 20 })
				.then(res => {
					const data = res.data;
					if (data.code == 200) {
						this.suggestList = data.location;
					} else {
						this.showError();
					}
				})
				.catch(() => {
					this.showError();
				});
		},

		handleEmit(val) {
			this.$store.commit('SET_CITY_INFO', val);
			uni.navigateTo({
				url: './index?from=search'
			});
		},

		showError() {
			uni.showToast({
				title: '获取失败，请检查网络',
				icon: 'none'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.weather-search-container {
	min-height: 100vh;
	background-color: #fff;
	.big-title {
		box-sizing: border-box;
		padding: 0 15px;
		margin-top: 15px;
		.middle-title {
			color: #000;
			margin-bottom: 15px;
			font-size: 16px;
			font-weight: bold;
		}
		.hot-list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
		}
		.small-item {
			width: 30%;
			margin-bottom: 10px;
			background-color: #f5f5f5;
			padding: 6px 0;
			text-align: center;
			border-radius: 5000rpx;
			font-size: 16px;
			&:last-of-type {
				margin-right: 0;
			}
		}
	}
	.suggest-list {
		box-sizing: border-box;
		padding: 0 15px;
		.suggest-item {
			padding: 13px 0;
			border-top: 1px solid #f5f5f5;
			text-indent: 8px;
			.active {
				color: #007aff;
			}
		}
	}
}
</style>
